<template>
	<view>
		<image src="https://image.hzwltb69.com/app/images/chongzhiback.png" style="width: 100%;height: 380rpx;"></image>
		<view class="goshop-spend-mobile">
		<view class="select-item-title" style="color:#6c6c6c;font-size: 36rpx;font-weight: 600;">手机号</view>
			<view class="goshop-spend-mobile-box">
				 <input placeholder="输入您的手机号" type="number" @input="onKeyInput"></input>
			</view>
		</view>
		<view class="goshop-spend-recharge">
			<view class="goshop-spend-recharge-box">
				<view class="goshop-spend-recharge-box-title">请选择充值金额</view>
				<view class="goshop-spend-recharge-box-select">
					<view class="select-item itemborder" :style="selected == 1 ? 'border: 2rpx solid #FE7739;box-shadow: 0px 0px 5px 0px #FE7739;' : 'border: 2rpx solid #ccc;box-shadow: 0px 0px 5px 0px #ccc;'" @tap="selectitem(1)" >
						<view class="select-item-title">50元话费</view>
						<view class="select-item-title2">48.00</view>
						<view class="select-item-price">原价：50.00</view>
					</view>
					<view class="select-item itemborder" :style="selected == 2? 'border: 2rpx solid #FE7739;box-shadow: 0px 0px 5px 0px #FE7739;' : 'border: 2rpx solid #ccc;box-shadow: 0px 0px 5px 0px #ccc;'" @tap="selectitem(2)" style="margin-left: 20rpx;">
						<view class="select-item-title">100元话费</view>
						<view class="select-item-title2">95.00</view>
						<view class="select-item-price">原价：100.00</view>
					</view>
				</view>
			</view>
		</view>
		<button class="goshop-spend-determine"   shape="circle" @tap="submit">立即充值</button>
		<view class="goshop-spend-coupon">
				<view class="goshop-spend-coupon-desc">
					<view>使用须知：</view>
					<view>1.适用范围：全国移动，联通，电信</view>
					<view>2.到账时间：充值到账时间为72小时内，个别号码倒找时间有延迟，月底月初高峰期请耐心等待。如超过约定时间没有到账会自动图款，请放心进行充值</view>
					<view>3.暂不支持携号转网，副卡，16/17/19等虚拟号段，空号等充值</view>
					<view>4.请仔细阅读使用须知和注意事项以及约定的到账时间购买时请仔细核对 充值账号，完整看完使用须知，确保账号准确性，虚拟商品不支持退货， 付款成功即默认，请悉知</view>
					<view>5.如充值不成功，平台将进行及时退款，如需要紧急处理，可在充值界面 联系在线客服</view>
					<view>6.慢充话费不支持催单，着急话费到账的请不要下单，一旦下单后在订单 话费未到账之前请不要在其他平台下单否则不予售后</view>
					<view>7.本权益由69商城提供</view>
					<view>请仔细阅读使用须知和注意事项以及约定的到账时间，付款成功即默认您 已经知晓</view>
				</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			 selected:1,
			 phone:"",
			 money:50.00,
			 amount:48.00
			};
		},
		computed: {
			isPhone() { //手机号码校验正则
				return /^1\d{10}$/.test(this.phone);
			},
		},
		 
		methods:{
			onKeyInput(n) {
				this.phone = n.detail.value
			},
			selectitem(index){
				this.selected = index;
				if(index==1){
					this.amount=48.00;
					this.money=50.00
				}
				if(index==2){
					this.amount=95.00;
					this.money=100.00
				}
			},
			submit(){
				if (!this.isPhone) {
					this.focusPhone = true
					return uni.showToast({
						title: "手机号码格式不正确",
						icon: 'none'
					});
				}
				this.$Router.replace({
					path:"/pages/order/payment/chongzhipayment",
					query: {
						amount:this.amount,
						money:this.money,
						phone:this.phone
					}
				});
			},
			
		}
	}
</script>

<style lang="scss">
page{
	background: #f7f7f7;
}
.itemborder-select{
	border: 2rpx solid #FE7739;
	box-shadow: 0px 0px 5px 0px #FE7739;
}
.itemborder{
	border: 2rpx solid #ccc;
	box-shadow: 0px 0px 5px 0px #ccc;
}
.select-item{
	width: 250rpx;
	height: 200rpx;
	background: #FFFFFF;
	 
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	.select-item-title{
		font-size: 28rpx;
		color: #ff935b;
	}
	.select-item-title2{
		font-size:38rpx;
		color: #ff935b;
		font-weight: 600;
		margin-top: 10rpx;
		
	}
	.select-item-price{
		font-size: 20rpx;
		color: #B1B1B1;
		text-align: center;
		text-decoration: line-through;
			margin-top: 10rpx;
		
	}
}
 
	.goshop-spend-recharge{
		padding: 10rpx 20rpx;
		.goshop-spend-recharge-box{
			background: #FFFFFF;
			padding: 20rpx;
			display: flex;
			flex-direction: column;
			position: relative;
			.goshop-spend-recharge-box-title{
				font-weight: bold;
			}
			.goshop-spend-recharge-box-select{
				display: flex;
				margin-top: 20rpx;
				align-items: center;
			}
		}
	}
	.goshop-spend-determine{
		margin-top: 20rpx;
		background: #ff934b;
		width: 720rpx;
		color: #fff;
	}
	.goshop-spend-mobile{
		padding:20rpx;
		.goshop-spend-mobile-box{
		 
			padding: 20rpx 20rpx;
			position: relative;
			border-bottom: #ccc solid 2rpx;
			
			.goshop-spend-protocol{
				font-size: 25rpx;
				margin-top: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
	.goshop-spend-explain{
		padding:10rpx 20rpx;
		.goshop-spend-explain-box{
			background-size: 100% 100%;
			background-position: 50% 50%;
			background-repeat: no-repeat;
		}
	}
	.goshop-spend-coupon{
		padding:10rpx 20rpx;
		.goshop-spend-coupon-box{
			//background: #FFFFFF;
			padding: 20rpx;
			background: linear-gradient(0deg, #FFFEFD 72%, #FFEDED 85%);
			.goshop-spend-coupon-item{
				height: 200rpx;
				margin: 20rpx auto 0 auto;
				background-size: 100% 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.goshop-spend-coupon-item-content{
					display: flex;
					align-items: center;
					flex-direction: column;
					font-size: 28rpx;
					width: 200rpx;
					color: #FE7739;
				}
			}
			.goshop-spend-coupon-desc{
				padding:20rpx 0;
				color: #A2A2A2;
			}
		}
	}
	.goshop-spend-step{
		padding:10rpx 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		.goshop-spend-step-box{
			background: #FFFFFF;
			height: 300rpx;
			background: url(https://y-qiwan.obs.cn-north-4.myhuaweicloud.com:443/qwhz-h5/page/h5_hf/h5_hf_pay/aw_bg_1.png) no-repeat;
			background-size: 100% 100%;
			padding: 10rpx;
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.goshop-spend-step-box-list{
				justify-content: space-between;
				display: flex;
				align-items: center;
			}
			.goshop-spend-step-box-desc{
				justify-content: space-between;
				display: flex;
				align-items: center;
				font-size: 25rpx;
				margin-top: 20rpx;
			}
		}
	}
	.goshop-spend-footer{
		padding:10rpx 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		.goshop-spend-footer-box{
			background: #FFFFFF;
		}
	}
 
</style>
